// out:../css/

@import url(./base.less);

body{
    background-color: #f9fafb;
}

@vw:3.75vw;

// 头部
header{
    position: fixed;
    top: 0;
    left: 0;
    
    padding:0 (15 / @vw);
    width: 100%;
    height: (50 / @vw);
    background-color: #fff;
    
    display: flex;
    justify-content: space-between;
    align-items: center;

    // 左侧
    .left{
        width: (225 / @vw);
        height: (50 / @vw);
        background-image: url(../assets/head.png);
        
        // 图片刚开始不显示是因为，该图片为二倍图，过大，需要设置背景大小
        // contain:图片宽度或高度与盒子尺寸相同时停止缩放，防止图片过大
        background-size: contain;
        
    }
    a{
        width: (80 / @vw);
        height: (30 / @vw);
        background-color: #ffe31b;
        border-radius: (15 / @vw);
        text-align: center;
        line-height: (30 / @vw);
        font-size: (14 / @vw);
        font-weight: 700;

    }

}

// 搜索
.search{
    margin-top: (50 / @vw);

    padding: (10 / @vw) (15 / @vw);

    .txt{
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
        
        text-align: center;
        line-height: (32 / @vw);

        font-size: (14 / @vw);
        color: #a1a4b3;

        .iconfont{
            font-size: (16 / @vw);
        }


    }
}

// banner
.banner{
    padding: 0 (15 / @vw);
    height: (108 / @vw);

    ul{
        li{
            width: (345 / @vw);
            height: (108 / @vw);
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (10 / @vw) ;
            }
            
        }

    }
}

// 排行榜
.list{
    margin-top: (20 / @vw);
    padding: (15 / @vw);
    li{
        display: flex;

        margin-bottom: (20 / @vw);
        height: (105 / @vw);
        background-color: #fff;
        border-radius: (10 / @vw);
        .pic{
            margin-right: (20 / @vw);
            img{
                width: (105 / @vw);
                height: (105 / @vw);
                border-radius: (10 / @vw);

            }
        }
        .txt{
            a{
                display: block;
                font-size: (12 / @vw);
                color: #a1a4b3;
                line-height: 1.8;
            }
            .more{
                font-size: (14 / @vw);
                color: #333;
                .iconfont{
                    font-size: (16 / @vw);
                }
            }
        }

    }
}

// 标题 + 公共样式
.title{
    display: flex;
    justify-content: space-between;
    margin-bottom: (16 / @vw);
    line-height: (25 / @vw);

    h4{
        font-size: (20 / @vw);
    }
    a{
        font-size: (12 / @vw);
        color: #a1a4b3;

    }

}

.recommend{
    margin-top: (20 / @vw);
    padding: (15 / @vw);
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: (105 / @vw);
            height: (143 / @vw);
            margin-bottom: (20 / @vw);
            .pic{
                position: relative;

                width: (105 / @vw);
                height: (105 / @vw);
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10 / @vw);
                }
                .cover{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70 / @vw);
                    height: (28 / @vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    text-align: center;
                    line-height: (28 / @vw);
                    font-size: (12 / @vw);
                    border-radius: 0 (10 / @vw);

                    color: #fff;

                }

            }
            .txt{
                font-size: (14 / @vw);
            }
        }
    }
}

// 下载安装
.download{
    position: fixed;
    bottom: (30 / @vw);
    left: (15 / @vw);

    padding: 0 (10 / @vw) 0 (15 / @vw);

    width: (345 / @vw);
    height: (45 / @vw);

    background-color: #fff;
    border-radius: (22 / @vw);
    
    display: flex;
    align-items: center;
    
    img{
        width: (36 / @vw);
        height: (36 / @vw);
        margin-right: (10 / @vw);  

    }
    p{
        flex: 1;
        font-size: (14 / @vw);
        color: #333;

    }
    span{
        width: (32 / @vw);
        height: (32 / @vw);
        background-color: #f2f3f5;
        border-radius: 50%;

        text-align: center;
        line-height: (32 / @vw);

        
    }

}
